<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.other_user_type"
        size="small"
        placeholder="选择用户类型"
        clearable
        class="filter-item"
      >
        <el-option label="所有" :value="0"/>
        <el-option label="未分配" :value="999"/>
        <el-option label="机构认证" :value="2"/>
        <el-option label="企业认证" :value="4"/>
      </el-select>

      <el-input
        v-model="listQuery.keyword"
        size="small"
        placeholder="请输入用户名"
        clearable
        class="filter-item w-200"
      />
      <el-input
        v-model="listQuery.phone"
        size="small"
        placeholder="请输入手机"
        clearable
        class="filter-item w-200"
      />
      <el-cascader :options="city" class="filter-item w-200" clearable :props="{checkStrictly: true }"
                   v-model="listQuery.user_cid" filterable
      ></el-cascader>

      <el-button-group class="filter-item">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >
          搜索
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-refresh"
          @click="refresh"
        >
          重置
        </el-button>
      </el-button-group>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      height="100%"

      class="table-container"
      highlight-current-row
    >
      <el-table-column
        label="ID"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column

        label="麻辣社区uid"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <a :href="'https://www.mala.cn/home.php?mod=space&uid='+scope.row.mala_id" target="_blank"
             style="color:#409EFF;display: flex;align-items: center;justify-content: center"
          ><img src="https://wap.mala.cn/mala/imgs/114.png" style="width:16px;margin-right:5px;">{{ scope.row.mala_id }}</a>
        </template>
      </el-table-column>

      <el-table-column
        label="用户名"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.user_name || scope.row.user_realname }}
        </template>
      </el-table-column>

      <el-table-column
        label="注册来源"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.user_comefrom }}
        </template>
      </el-table-column>


      <el-table-column
        label="用户类型"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.user_type_text }}
        </template>
      </el-table-column>
      <el-table-column
        label="认证类型"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.user_other_type>0">{{ scope.row.user_other_type_text }}</div>
          <div v-else style="color:red;cursor: pointer" @click="goUserType(scope.row.mala_id,scope)">刷新API</div>
        </template>
      </el-table-column>
      <el-table-column
        width="130"
        label="手机"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.user_phone }}
        </template>
      </el-table-column>

      <el-table-column
        width="200"
        label="绑定区域"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.cityPk }}
        </template>
      </el-table-column>

      <el-table-column
        width="250"
        label="认证资料"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.user_verify }}
        </template>
      </el-table-column>

      <el-table-column
        label="注册时间"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="300"
        align="center"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              :loading="scope.row.refMalaicon"
              icon="el-icon-refresh"
              size="mini"
              @click="refMala(scope.row.mala_id,scope)"
            >
              同步认证
            </el-button>

            <el-button
              type="success"
              :loading="scope.row.refMalaicon"
              icon="el-icon-s-custom"
              size="mini"
              @click="login(scope.row.id,scope)"
            >
              登录
            </el-button>

          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'modify' ? '修改' : '新增'"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-width="120px"
        label-position="right"
      >
        <el-form-item label="手机">
          <el-input v-model="temp.user_phone" placeholder="绑定手机"/>
        </el-form-item>
        <el-form-item label="账号类型">
          <el-radio-group v-model="temp.user_type">
            <el-radio :label="3">认证账号</el-radio>
            <el-radio :label="1">普通账号</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="认证类型" v-if="temp.user_type==3">
          <el-radio-group v-model="temp.user_other_type">
            <el-radio :label="2">机构认证</el-radio>
            <el-radio :label="4">企业认证</el-radio>
          </el-radio-group>
          <div style="color:#999;font-size:12px">该账号若重新登录会重置与mala.cn一致</div>
        </el-form-item>

        <el-form-item label="绑定区域" v-if="temp.user_type==3">
          <el-cascader :options="city" clearable :props="{checkStrictly: true }" v-model="temp.user_cid" filterable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div class="text-right">
        <el-button type="danger" @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { authUserLogin, getCity, getList, getMalaApi, updateUser } from '@/api/user'
import { deepClone } from '@/utils'

const _temp = {
  user_phone: '',
  user_other_type: 0,
  user_cid: 0,
  user_type: 0
}

export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      list: [],
      city: [],
      props: {
        value: 'cid'
      },
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        created_at: undefined,
        status: undefined,
        keyword: undefined
      },
      temp: Object.assign({}, _temp),
      dialogVisible: false,
      dialogType: 'create',
      loading: false
    }
  },
  created() {
    this.fetchData()
    this.getCity()
  },
  methods: {
    getCity() {

    },
    login(uid) {
      this.$prompt('请输入你的登录密码', '授权提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (!value) {
          this.$message({
            type: 'error',
            message: '请输入密码'
          })
          return false
        }
        authUserLogin({ pwd: value, uid: uid }).then(r => {
          const h = this.$createElement
          // let h='<a href="'+r.data+'">点击登录</a>';
          this.$msgbox({
            title: '授权反馈',
            message: h('p', null, [
              h('span', null, '点击右侧访问登录该账号 '),
              h('a', {
                attrs: {
                  href: r.data,
                  target:'_blank'
                },
                style: 'color: teal'
              }, '访问并登录')
            ]),
            showCancelButton: false,
            confirmButtonText: '确定',
          })
        })
      }).catch(() => {

      })
    },
    search() {
      this.fetchData()
    },
    refMala(mala_id, scope) {
      if (mala_id) {
        this.list[scope.$index].refMalaicon = true
        this.list[scope.$index].user_verify = '从mala.cn提取中...'
        getMalaApi({ apiPath: 'updateVerifyText', mala_id: mala_id }).then(response => {
          this.list[scope.$index].refMalaicon = false
          this.list[scope.$index].user_verify = response.data.user_verify
        }, data => {
          this.list[scope.$index].refMalaicon = false
        })

      } else {
        this.$message({
          message: '参数错误',
          type: 'error'
        })
      }
    },
    goUserType(mala_id, scope) {
      if (mala_id) {
        this.list[scope.$index].user_other_type = 999
        this.list[scope.$index].user_other_type_text = '请求中...'
        getMalaApi({ apiPath: 'updateUserType', mala_id: mala_id }).then(response => {
          if (response.code == 200) {
            this.list[scope.$index].user_other_type = response.data.user_other_type
            this.list[scope.$index].user_other_type_text = response.data.user_other_type_text
          } else {
            this.$message({
              message: response.data,
              type: 'error'
            })
          }
        }, data => {
          this.list[scope.$index].user_other_type = 0
        })
      } else {
        this.$message({
          message: '参数错误',
          type: 'error'
        })
      }
    },
    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        created_at: undefined,
        status: undefined,
        keyword: undefined
      }
      //
      localStorage.setItem('citys', '')
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      let citys = localStorage.getItem('citys')
      if (!citys) {
        getCity().then(response => {
          this.city = response.data.city
          localStorage.setItem('citys', JSON.stringify(this.city))
        })
      } else {
        this.city = JSON.parse(citys)
      }
      getList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    resetTemp() {
      this.temp = Object.assign({}, _temp)
    },
    edit(scope) {
      this.resetTemp()
      this.dialogVisible = true
      this.dialogType = 'modify'
      this.temp = deepClone(scope.row)
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    submit() {
      if (this.loading) {
        return
      }
      this.loading = true
      updateUser(this.temp).then(r => {
        this.dialogVisible = false
        this.loading = false
        this.fetchData()
      }, data => {
        this.loading = false
      })
    }
  }
}
</script>
